<template>
	<view class="main-info" :style="{height:boxHeight + 'px'}">
		<view class="item" :class="'item1' + (index + 1)" v-for="(item, index) in dataList" :key="index"
			v-if="index < 21" @click.smargin-top="clickItem(item.user_id)">
			<qmy-gender-border iconBottom="4rpx" :gender="item.user_gender" :avatar="item.user_avatar || 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'" :avatarWidth="90 + 'rpx'" :avatarHeight="90 + 'rpx'"></qmy-gender-border>
			<view class="whi-sp fs-20">{{item.user_name || '匿名用户'}}</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			dataList: {
				type: Array
			},
		},
		data() {
			return {
				boxHeight: 0
			}
		},
		methods: {
			clickItem(id) {
				this.$emit('change', id)
			},
			previewImage(url) {
				let list = []
				list.push(url)
				uni.previewImage({
					current: 0,
					urls: list
				})
			},
			// 获取每个item的高度并累加
			adjustMainInfoHeight() {
				this.$nextTick(() => {
					// 确保不会重复开启定时器
					if (this.heightTimer) {
						clearInterval(this.heightTimer);
					}

					let maxHeight = 0;
					this.heightTimer = setInterval(() => {
						const query = uni.createSelectorQuery().in(this);
						query.selectAll('.item').boundingClientRect((rects) => {
							if (!rects || rects.length === 0) return;

							rects.forEach(rect => {
								maxHeight = Math.max(maxHeight, rect.height);
							});

							// 更新 boxHeight
							this.boxHeight = maxHeight + 30;
						}).exec();
					}, 200); // 每 200ms 计算一次

					// 在最长动画时长后（20s）停止计算
					setTimeout(() => {
						clearInterval(this.heightTimer);
						this.heightTimer = null; // 释放变量
					}, 20000); // 20s 对应最长动画时长
				});
			},

			beforeDestroy() {
				// 组件销毁时清除定时器
				if (this.heightTimer) {
					clearInterval(this.heightTimer);
					this.heightTimer = null;
				}
			}



		}
	};
</script>
<style lang="scss" scoped>
	.main-info {
		width: 100%;
		position: relative;
	}

	.item {
		height: auto;
		text-align: center;

		.photo-img {
			border-radius: 2000rpx;
			width: 90rpx;
			height: 90rpx;
		}
	}

	.item1 {
		position: absolute;
		right: 0;
		margin-top: 6rpx;
		animation: animX-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -6.2s infinite alternate,
			animY-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
			scale-data-v-c5c85758 20s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
	}

	.item2 {
		position: absolute;
		right: 40rpx;
		margin-top: 12rpx;
		animation: animX-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -9.2s infinite alternate,
			animY-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate,
			scale-data-v-c5c85758 20s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate;
	}

	.item3 {
		position: absolute;
		right: 40rpx;
		margin-top: 14rpx;
		animation: animX-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -11.8s infinite alternate,
			animY-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
			scale-data-v-c5c85758 20s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate;
	}

	.item4 {
		position: absolute;
		right: 72rpx;
		margin-top: 18rpx;
		animation: animX-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -14.3s infinite alternate,
			animY-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate,
			scale-data-v-c5c85758 20s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate;
	}

	.item5 {
		position: absolute;
		right: 208rpx;
		margin-top: 24rpx;
		animation: animX-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -17s infinite alternate,
			animY-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate,
			scale-data-v-c5c85758 20s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate;
	}

	.item6 {
		position: absolute;
		right: 320rpx;
		margin-top: 26rpx;
		animation: animX-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -19.7s infinite alternate,
			animY-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate,
			scale-data-v-c5c85758 20s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate;
	}

	.item7 {
		position: absolute;
		right: 500rpx;
		margin-top: 35rpx;
		animation: animX-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -22.1s infinite alternate,
			animY-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -17.8s infinite alternate,
			scale-data-v-c5c85758 20s cubic-bezier(0.36, 0, 0.64, 1) -17.8s infinite alternate;
	}

	.item8 {
		position: absolute;
		right: 400rpx;
		margin-top: 30rpx;
		animation: animX-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -24.4s infinite alternate,
			animY-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -19s infinite alternate,
			scale-data-v-c5c85758 20s cubic-bezier(0.36, 0, 0.64, 1) -19s infinite alternate;
	}

	.item9 {
		position: absolute;
		right: 492rpx;
		margin-top: 34rpx;
		animation: animX-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -19.2s infinite alternate,
			animY-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate,
			scale-data-v-c5c85758 20s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate;
	}

	.item10 {
		position: absolute;
		right: 500rpx;
		margin-top: 38rpx;
		animation: animX-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -22.5s infinite alternate,
			animY-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -17.8s infinite alternate,
			scale-data-v-c5c85758 20s cubic-bezier(0.36, 0, 0.64, 1) -17.8s infinite alternate;
	}

	.item11 {
		position: absolute;
		right: 580rpx;
		margin-top: 42rpx;
		animation: animX-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -23.9s infinite alternate,
			animY-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -18.9s infinite alternate,
			scale-data-v-c5c85758 20s cubic-bezier(0.36, 0, 0.64, 1) -18.9s infinite alternate;
	}

	.item12 {
		position: absolute;
		right: 580rpx;
		margin-top: 36rpx;
		animation: animX-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -8.8s infinite alternate,
			animY-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate,
			scale-data-v-c5c85758 20s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate;
	}

	.item13 {
		position: absolute;
		right: 580rpx;
		margin-top: 32rpx;
		animation: animX-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -14.1s infinite alternate,
			animY-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate,
			scale-data-v-c5c85758 20s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate;
	}

	.item14 {
		position: absolute;
		right: 208rpx;
		margin-top: 50rpx;
		animation: animX-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -17s infinite alternate,
			animY-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate,
			scale-data-v-c5c85758 20s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate;
	}

	.item15 {
		position: absolute;
		right: 460rpx;
		margin-top: 41rpx;
		animation: animX-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -11.5s infinite alternate,
			animY-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
			scale-data-v-c5c85758 20s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate;
	}

	.item16 {
		position: absolute;
		right: 460rpx;
		margin-top: 27;
		animation: animX-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -6.5s infinite alternate,
			animY-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
			scale-data-v-c5c85758 20s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
	}

	.item17 {
		position: absolute;
		right: 492rpx;
		margin-top: 33rpx;
		animation: animX-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -19.7s infinite alternate,
			animY-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate,
			scale-data-v-c5c85758 20s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate;
	}

	.item18 {
		position: absolute;
		right: 72rpx;
		margin-top: 15rpx;
		animation: animX-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -14.7s infinite alternate,
			animY-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate,
			scale-data-v-c5c85758 20s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate;
	}

	.item19 {
		position: absolute;
		right: 40rpx;
		margin-top: 38rpx;
		animation: animX-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -11.4s infinite alternate,
			animY-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
			scale-data-v-c5c85758 20s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate;
	}

	.item20 {
		position: absolute;
		right: 460rpx;
		margin-top: 47rpx;
		animation: animX-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -6.9s infinite alternate,
			animY-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
			scale-data-v-c5c85758 20s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
	}

	.item21 {
		position: absolute;
		right: 500rpx;
		margin-top: 26rpx;
		animation: animX-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -21.9s infinite alternate,
			animY-data-v-c5c85758 10s cubic-bezier(0.36, 0, 0.64, 1) -17.8s infinite alternate,
			scale-data-v-c5c85758 20s cubic-bezier(0.36, 0, 0.64, 1) -17.8s infinite alternate;
	}

	@keyframes animX-data-v-c5c85758 {
		0% {
			right: 0rpx;
		}

		to {
			right: 650rpx;
		}
	}

	@keyframes animY-data-v-c5c85758 {
		0% {
			top: 0;
			opacity: 0.1;
		}

		to {
			top: 20rpx;
			opacity: 1;
		}
	}

	@keyframes scale-data-v-c5c85758 {
		0% {
			transform: scale(0.7) rotateY(-180deg);
		}

		50% {
			transform: scale(1) rotateY(0deg);
		}

		to {
			transform: scale(0.7) rotateY(180deg);
		}
	}
</style>